<template>
  <div ref="reasonHeight">
    <div class="c-flex-row c-fs20 c-mt16" v-if="(source == 0 && item.rejectReason) || source == 1">
      <div class="c-fc-gray">{{source == 0 ? '驳回理由:' : '【原因:】'}} </div>
      <div class="c-w0 c-flex-grow1 c-flex-row c-justify-sb c-pl10" @click="getMore">
        <div :class="[isShowTwoLine == true ? 'c-text-ellipsis2' : '', source == 0 ? 'c-fc-xblack' : 'c-fc-gray']" class="c-ww-bw c-ww-ba">{{source == 0 ? item.rejectReason : item.desc ? item.desc : '无'}}</div>
        <span class="iconfont c-fs20 c-fc-xblack c-pl20" v-if="isShowArrow && source == 0">{{arrowDirection ? '&#xe6ab;' : '&#xe6a9;'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "countLineHeight",
  props: {
    item: {
      type: Object,
      default: null
    },
    source: {
      type: Boolean,
      default: 0, //1来自区域代理
    }
  },
  data() {
    return {
      isShowArrow: false,
      isShowTwoLine: false,
      arrowDirection: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.reasonHeight.offsetHeight > 30) {
        this.isShowArrow = true
        this.isShowTwoLine = true
      }
    })
  },
  methods: {
    getMore() {
      this.isShowTwoLine = !this.isShowTwoLine;
      this.arrowDirection = !this.arrowDirection;
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>